<template>
  <div>
    <dl>
      <dt>欢迎光临_vue开发的收银系统_水果店</dt>
      <dd id="dl">苹果10￥/斤,折扣(八折)</dd>
      <dd>请输入你要购买的斤数 <input type="text" v-model="num" /></dd>
      <dd><button @click="btn">结帐买单~</button></dd>
      <dd id="dlt">结账单:总价:0￥元 折后价:0￥元 省了: 0￥元</dd>
    </dl>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      num: 0,
    };
  },
  methods: {
    btn() {
      let str = `结账单:总价:${this.num * 10}￥元 折后价:${this.num * 10 * 0.8}￥元 省了:${this.num * 10 - this.num * 10 * 0.8}￥元`
      document.querySelector('#dlt').innerHTML = str
    },
  },
};
</script>

<style>
dt {
  text-align: center;
  font-size: 21px;
}

#dl {
  font-weight: 700;
}

dd {
  text-align: center;
  border: 1px solid #000;
  margin-top: 3px;
}
</style>